<template>
  <div class="body">
    <div class="topmost" v-show="topmost">
      <van-icon name="arrow-left" class="aacon" size="26px" @click="fanhui" />
      <span>{{ data.name }}</span>
    </div>
    <div class="top">
      <img :src="data.poster + img" alt="" />
      <van-icon name="arrow-left" class="con" size="26px" @click="fanhui" />
    </div>

    <div class="topcenter">
      <p>
        <span>{{ data.name }}</span
        ><span>{{ data.item.name }}</span
        ><span>{{ data.grade | fens }}</span>
      </p>
      <p>{{ data.category }}</p>
      <p>
        <span>{{ data.premiereAt | timeright }}上映</span>
      </p>
      <p>
        <span>{{ data.nation }}</span>
        <span>|{{ data.runtime }}分钟</span>
      </p>
      <div :style="isCollapse ? 'height:37px' : 'height:120px'">
        {{ data.synopsis }}
      </div>
      <van-icon
        :name="isCollapse ? 'arrow-down' : 'arrow-up'"
        class="scoa"
        size="10px"
        @click="reversal"
      />
    </div>
    <div class="threediv">
      <p>演职人员</p>
      <div class="performerall">
        <div class="performer" v-for="ite in data.actors" :key="ite.name">
          <img :src="ite.avatarAddress" alt />
          <p>{{ ite.name }}</p>
          <p>{{ ite.role }}</p>
        </div>
      </div>
    </div>
    <div class="stillsdiv">
      <p>
        <span>剧照</span>
        <span>
          全部
          <span>(5)</span>
          <van-icon name="arrow" class="con" size="10px" />
        </span>
      </p>
      <div>
        <img v-for="ite in data.photos" :key="ite" :src="ite" alt="" />
      </div>
    </div>
    <button @click="gogog">选座购票</button>
  </div>
</template>
<script>
import moment from "moment";
import { Detail } from "../api/api";
export default {
  props: [],
  data() {
    return {
      data: {
        item: {},
      },
      img: "?x-oss-process=image/quality,Q_70",
      isCollapse: true,
      topmost: false,
    };
  },
  computed: {},
  methods: {
    xsaads() {
      let a = window.location.search.substring(1);
      Detail(a).then((res) => {
        this.data = res.data.data.film;
        console.log(res.data.data.film.filmId);
      });
    },
    reversal() {
      this.isCollapse = !this.isCollapse;
    },
    fanhui() {
      this.$router.go(-1);
    },
    handleScroll() {
      // console.log(1);
      //变量scrollTop是滚动条滚动时，距离顶部的距离
      var scrollTop =
        document.documentElement.scrollTop || document.body.scrollTop;
      if (scrollTop > 5) {
        this.topmost = true;
      }
      if (scrollTop < 5) {
        this.topmost = false;
      }
    },
    gogog() {
      this.$router.push("/cinemas?" + this.data.filmId);
    },
  },
  components: {},
  filters: {
    timeright: function (value) {
      return moment(value * 1000).format("YYYY-MM-DD ");
    },
    fens: function (val) {
      if (!val) return "";
      return val + "分";
    },
  },
  watch: {},
  created() {
    this.xsaads();
  },
  beforeMount() {},
  mounted() {
    window.addEventListener("scroll", this.handleScroll);
  },
  beforeUpdate() {},
  updated() {},
  beforeDestroy() {},
  destroyed() {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.topmost {
  position: fixed;
  top: 0;
  width: 100%;
  height: 45px;
  background-color: #fff;
  z-index: 99;
}
.topmost .aacon {
  line-height: 45px;
}
.topmost span {
  position: absolute;
  left: 40%;
  line-height: 45px;
  font-size: 18px;
}
.body {
  background-color: #eeeeee;
}
.top {
  position: relative;
  overflow: hidden;
  height: 200px;
}
.top img {
  width: 100%;
}
.top .con {
  display: block;
  width: 25px;
  height: 25px;
  border: 1px solid #ccc;
  border-radius: 50%;
  background-color: #eee;
  opacity: 0.3;
  position: absolute;
  top: 5px;
  left: 5px;
}
.topcenter {
  background-color: #fff;
  width: 100%;
  /* height: 200px; */
  padding-bottom: 15px;
  position: relative;
}
.topcenter > p:nth-of-type(1) > span:nth-of-type(1) {
  font-size: 18px;
}
.topcenter > p:nth-of-type(1) > span:nth-of-type(2) {
  font-size: 12px;
  display: inline-block;
  width: 20px;
  height: 12px;
  margin-left: 7px;
  text-align: center;
  background-color: #ccc;
  color: #fff;
}
.topcenter > p:nth-of-type(1) > span:nth-of-type(3) {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 20px;
  color: red;
  font-style: italic;
}
.topcenter > p:nth-of-type(1) > span:nth-of-type(3) > span {
  font-size: 14px;
  font-style: initial;
}
.topcenter p {
  margin-left: 10px;
  padding-top: 10px;
}
.topcenter p:nth-of-type(2) {
  font-size: 12px;
  color: #888;
}
.topcenter p:nth-of-type(3) {
  font-size: 12px;
  color: #888;
}
.topcenter p:nth-of-type(4) {
  font-size: 12px;
  color: #888;
}
.topcenter div {
  font-size: 14px;
  color: #888;
  margin: 10px 10px 20px 10px;
  transition: all 0.5s;
  overflow: hidden;
}
.topcenter .scoa {
  display: block;
  position: absolute;
  left: 50%;
  bottom: 5%;
}
.threediv {
  background-color: #fff;
  width: 100%;

  margin-top: 10px;
}
.threediv > .performerall {
  display: flex;
  overflow-y: auto;
  /* display: none; */
  margin-left: 15px;
}
.threediv .performer {
  margin-bottom: 20px;
  margin-right: 10px;
}
.threediv .performer img {
  width: 85px;
  height: 90px;
}
.threediv > p {
  font-size: 16px;
  padding: 20px 0 10px 15px;
}
.threediv .performer p {
  text-align: center;
}
.threediv .performer p:nth-of-type(2) {
  margin-top: 5px;
  color: #4444;
}
.threediv > .performerall::-webkit-scrollbar {
  display: none;
}
.stillsdiv {
  background-color: #fff;
  margin-top: 20px;
  padding-bottom: 60px;
}
.stillsdiv > p {
  padding: 10px 10px;
  position: relative;
}
.stillsdiv > p > span:nth-of-type(2) {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #bbbb;
}
.stillsdiv div {
  white-space: nowrap; /*文本不会换行，文本会在在同一行上继续*/
  overflow-y: auto; /*可滑动*/
}
.stillsdiv div img {
  width: 150px;
  height: 100px;
  margin: 10px 10px;
}
.stillsdiv div::-webkit-scrollbar {
  display: none;
}
.body button {
  position: fixed;
  bottom: 0;
  z-index: 99;
  display: block;
  width: 100%;
  height: 50px;
  background-color: red;
  border: none;

  color: #eee;
  margin-top: 10px;
}
</style>